<template>
<div>
  <el-input v-model="input" placeholder="请输入学生/老师" style="width: 180px;"></el-input>
  <el-button type="primary" plain @click.native="handleRightClick(index)">查询</el-button>

  <el-table
    :data="tableData2"
    border
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      width="100">
    </el-table-column>
    <el-table-column
      prop="class1"
      label="第一节">
    </el-table-column>
    <el-table-column
      prop="class2"
      label="第二节">
    </el-table-column>
    <el-table-column
      prop="class3"
      label="第三节">
    </el-table-column>
    <el-table-column
      prop="class4"
      label="第四节">
    </el-table-column>
  </el-table>

  <el-card class="box-card" style="position: absolute;right: 0;top: 25px;width: 30%;">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="老师" name="1">
        <div>老师
          列表文本按顺序逗号分割
          <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}"  placeholder="请输入内容"
            v-model="textarea1" @change="handelTeacherChange()">
          </el-input>
          Ruel_7_allowTeacherTime：老师允许的时间段
          <el-input type="textarea" style="width: 85%" :autosize="{ minRows: 2, maxRows: 4}"  placeholder="请输入内容"
                    v-model="textarea5">
          </el-input>
          <el-button slot="append" plain icon="el-icon-setting" @click.native="dialogFormVisible = true" ></el-button>

          <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="老师" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="课时" :label-width="formLabelWidth">
                <el-input v-model="form.desc" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="日期" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>

          <el-select v-model="equipments" style="width: 100%;"
                     filterable
                     multiple
                     @change="handelSelectChange()"
                     placeholder="请选择">
            <el-option-group
              v-for="group in options3"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right;margin-right: 15px; color: #8492a6; font-size: 13px">{{item.value}}</span>
              </el-option>
            </el-option-group>
          </el-select>

          <template>
            <div id="Demo">
              <el-form ref="form" label-width="100px">
                  <div
                    class="check-group"
                    v-for="(item, index) in equipments"
                    :key="item">
                    {{alloptions[item]}}
                    <el-checkbox-group
                      v-model="checkedEquipments[item]"
                      @change="handleCheckboxChange(item)">
                      {{checkedEquipments[item]}}
                      <el-checkbox
                        v-for="data in cities"
                        :label="item+'-'+data" :key="item+'-'+data">
                        {{data}}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
              </el-form>
            </div>
          </template>

          连续上课 老师:day_count
          <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}"  placeholder="请输入内容"
                    v-model="textarea3">
          </el-input>
          Ruel_6_dayteacher_count:每天老师的节数（老师每天 4 节课）
          <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}"  placeholder="请输入内容"
                    v-model="textarea4">
          </el-input>

          Ruel_8_teacher_superTeachers：实习老师必须有督导老师
          <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}"  placeholder="请输入内容"
                    v-model="textarea6">
          </el-input>
          Ruel_8_allow_dayTeacher_repeatCount：允许老师每天连续排课节数
          <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}"  placeholder="请输入内容"
                    v-model="textarea7">
          </el-input>
          Ruel_11_allow_WeekTeacher_Count：允许老师每周节数
          <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}"  placeholder="请输入内容"
                    v-model="textarea8">
          </el-input>
        </div>
      </el-collapse-item>
      <el-collapse-item title="学生" name="2">
        <div>Ruel_1_studentThead：学生队列，顺序排（一般2个排一起）
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
                    v-model="student_textarea1">
          </el-input>
            Ruel_5_student_teacherCount：优先同一个学生 同一个老师：生成 学生 老师对
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
                    v-model="student_textarea2">
          </el-input>
          Ruel_6_allowStudentTime：学生允许的时间段
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
                    v-model="student_textarea3">
          </el-input>
          Ruel_9_allow_dayStudent_repeatCount：允许学生每天连续排课节数
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
                    v-model="student_textarea4">
          </el-input>
          Ruel_10_allow_weekStudent_Count：允许学生每周节数
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
                    v-model="student_textarea5">
          </el-input>
        </div>
      </el-collapse-item>
      <el-collapse-item title="其他" name="3">
        DayClasses每天的课时数
        <el-input type="textarea" autosize placeholder="请输入内容" value="7"
        v-model="dayclasses">
        </el-input>
        <div>Ruel_dayclass_teacherslist：一节课 一个老师 只能排一个</div>

        <div>Ruel_dayclass_studentlist：一节课 一个学生 只能排一个</div>
        <div>Ruel_2_dayStudents：学生需要隔至少一天 再来，效果好</div>
      </el-collapse-item>
    </el-collapse>
  </el-card>

</div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  import {ymeetingset
    ,ymeetingajax
    ,savey
    ,findy
    ,dely
  } from "@/api/yready";

  export default {
    created() {
      // 初始化默认选中状态
      for (let i = 0; i < this.checkEquip.length; i++) {
        let checkArr = []
        let item = this.checkEquip[i]
        if (item.length === 0) {
          this.checkedEquipments.push([])
        }else {
          for (let j = 0; j < item.length; j ++) {
            checkArr.push(item[j])
          }
          this.checkedEquipments.push(checkArr)
        }
      }

      this.initTeacher();
    },
    methods: {
      handleTextarea5Click(){
        alert(0)
      },
      handelTeacherChange(){
        ymeetingajax('setTeachers',{'teachers':this.textarea1})
          .then(res => {
            console.log(res);
            this.options3 = res.data;
            this.initTeacher();
          });
      },
      initTeacher(){
        this.options3.forEach(item =>  {
          item.options.forEach(itemo=> {
            this.alloptions[itemo.value] = itemo.label;
          });
        })
      },
      handelSelectChange(){
        this.equipments.forEach(item => {
          if(item >= this.checkedEquipments.length){
            this.$set(this.checkedEquipments, item, [])
          }

        })
      },
      handleCheckboxChange (item) {
        this.checkEquip = this.checkedEquipments;
      },

      handleChange(val) {
        console.log(val);
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleRightClick(id,index){
        console.log(id,"setmeeting.vue,handleRightClick");
        var param = {key:this.input};
        ymeetingset(param)
          .then(res => {
            this.tableData2 = res.data;
          });
      }
    },
    data() {
      return {
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',


        textarea1:'代代,沐沐,小宇,雁子,',
        checkedEquipments: [], //随意修改后的checked项（即要传到后台的变更数据）
        equipments: [ '1','2'],  // 所有数据, 即学生选择框，保存的时候按照老师 for进行保存，没有选中的老师不保存
        checkEquip: [  //模拟后台获取的数据（各el-checkbox-group默认checked项）
          [],
          ['1-1','1-2'],
          ['2-3','2-7']
        ],
        alloptions:{'1':"上海1",'2':'北京2'},
        cities:['1', '2', '3', '4', '5', '6', '7'],
        options3: [{
          label: '热门城市',
          options: [{
            value: '1',
            label: '上海1'
          }, {
            value: '2',
            label: '北京2'
          }]
        }, {
          label: '城市名',
          options: [{
            value: '3',
            label: '成都3'
          }, {
            value: '4',
            label: '深圳4'
          }, {
            value: '5',
            label: '广州5'
          }, {
            value: '6',
            label: '大连6'
          }]
        }],
        value7: '',

        activeNames: ['1','2','3'],
        tableData2: [{
          date: '2016-05-02',
          class1: '王小虎',
          class2: '上海市普陀区金沙江路 1518 弄',
          class3: '上海市普陀区金沙江路 1518 弄',
          class4: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          class1: '王小虎',
          class2: '上海市普陀区金沙江路 1518 弄',
          class3: '上海市普陀区金沙江路 1518 弄',
          class4: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-01',
          class1: '王小虎',
          class2: '上海市普陀区金沙江路 1518 弄',
          class3: '上海市普陀区金沙江路 1518 弄',
          class4: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          class1: '王小虎',
          class2: '上海市普陀区金沙江路 1518 弄',
          class3: '上海市普陀区金沙江路 1518 弄',
          class4: '上海市普陀区金沙江路 1518 弄',
        }]
      }
    }
  }
</script>
